<template>
  <div>
    <attributeCateSelect
      :select_disabled="
        CARD_SCENE == 'ADD_SPU' ||
        CARD_SCENE == 'EDIT_SPU' ||
        CARD_SCENE == 'ADD_SKU'
      "
    ></attributeCateSelect>

    <div class="spu_layout_card" style="margin: 10px 0 0">
      <el-card>
        <div class="attr_list" v-show="CARD_SCENE == 'DEFAULT_LIST'">
          <el-button
            type="primary"
            size="default"
            icon="Plus"
            @click="SWITCH_CARD('ADD_SPU')"
            :disabled="!AttributeCateStore.key_third"
          >
            添加SPU
          </el-button>

          <div class="table_section" style="margin: 10px 0">
            <el-table :data="tableData" stripe border>
              <el-table-column
                label="序号"
                width="100"
                type="index"
                align="center"
              />
              <el-table-column prop="spuName" label="SPU名称" />
              <el-table-column
                prop="description"
                label="SPU描述"
                show-overflow-tooltip
              />
              <el-table-column label="操作" fixed="right">
                <template #default="scope">
                  <el-button
                    type="primary"
                    icon="Edit"
                    size="small"
                    title="修改SPU"
                    @click="SWITCH_CARD('EDIT_SPU', scope.row.id)"
                  ></el-button>
                  <el-button
                    type="success"
                    icon="Plus"
                    size="small"
                    title="添加SKU"
                    @click="SWITCH_CARD('ADD_SKU', scope.row.id)"
                  ></el-button>

                  <el-button
                    type="info"
                    icon="View"
                    size="small"
                    title="查看SKU列表"
                    @click="OPEN_DIALOG(scope.row.id)"
                  ></el-button>

                  <el-button
                    type="danger"
                    icon="Delete"
                    size="small"
                    title="删除SPU"
                    @click="DELETE_ATTR(scope.row.id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination_section">
            <el-pagination
              v-model:current-page="form.pageNo"
              v-model:page-size="form.limit"
              :page-sizes="[10, 20, 50, 100]"
              background
              layout="prev, pager, next,jumper, ->,sizes,total "
              :total="total"
              @size-change="GET_LIST"
              @current-change="GET_LIST"
            />
          </div>
        </div>
        <spuUpdate
          v-show="CARD_SCENE == 'ADD_SPU' || CARD_SCENE == 'EDIT_SPU'"
          :updateData="attrParams"
          :formType="CARD_SCENE"
          @confirmUpdate="CHANGE_ATTR_CALLBACK"
          @cancelUpdate="SWITCH_CARD('DEFAULT_LIST')"
        ></spuUpdate>

        <skuUpdate
          v-show="CARD_SCENE == 'ADD_SKU'"
          :updateData="attrParams"
          :formType="CARD_SCENE"
          @confirmUpdate="CHANGE_ATTR_CALLBACK"
          @cancelUpdate="SWITCH_CARD('DEFAULT_LIST')"
        ></skuUpdate>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'spuLayout',
}
</script>
<script setup lang="ts">
import { ElMessage } from 'element-plus'

import { onMounted, onBeforeUnmount, ref, reactive, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { publicConfirm } from '@/utils/handleData'

import spuUpdate from './spuUpdate.vue'
import skuUpdate from './skuUpdate.vue'

import { resSpuList, reqDeletSPU, resIdBySkuList } from '@/api/product'
import type { Spu, SpuListResponseData, SpuList } from '@/api/product/type'
import useAttributeCate from '@/store/modules/attributeCateStore'
let AttributeCateStore = useAttributeCate()
const { key_third } = storeToRefs(AttributeCateStore)

onMounted(() => {})

onBeforeUnmount(() => {
  AttributeCateStore.$reset()
})
watch(key_third, (newValue) => {
  //   console.log('sum变化了', newValue)
  if (newValue) {
    GET_LIST()
  } else {
    tableData.value = []
  }
})
let total = ref<number>(1)
let form = reactive({
  pageNo: 1,
  limit: 10,
})
let tableData = ref<SpuList>([])

let sku_tableData = ref<any>([])

const attrParams_init = {
  id: 0,
  spuName: '',
  description: '',
  category3Id: AttributeCateStore.key_third,
  tmId: '',
  spuSaleAttrList: [],
  spuImageList: [],
}
let attrParams = reactive<Spu>({
  ...attrParams_init,
})

const dialogVisible = ref(false)

const GET_LIST = async () => {
  Object.assign(form, { category2Id: AttributeCateStore.key_third })
  let result: SpuListResponseData = await resSpuList(form)
  if (result.code == 200) {
    tableData.value = result.data.records
    total.value = result.data.total
  }
}

let CARD_SCENE = ref<string>('DEFAULT_LIST')
const SWITCH_CARD = (scene, id = 0) => {
  SWITCH_INIT_CARD({ scene, id })
  CARD_SCENE.value = scene
}

const SWITCH_INIT_CARD = ({ scene, id }) => {
  Object.assign(attrParams, {
    ...attrParams_init,
    spuSaleAttrList: [],
    spuImageList: [],
  })
  if (scene == 'DEFAULT_LIST') {
    // 切回列表
  } else if (scene == 'ADD_SPU') {
    // 添加SPU
  } else if (scene == 'EDIT_SPU') {
    // 修改属性
    const found = tableData.value.find((item) => item.id === id)
    if (found) {
      Object.assign(attrParams, found)
    }
  } else if (scene == 'ADD_SKU') {
    // 添加SKU
    const found = tableData.value.find((item) => item.id === id)
    if (found) {
      Object.assign(attrParams, found)
    }
  }
}

// 删除SPU
const DELETE_ATTR = async (id = 0) => {
  const flag = await publicConfirm({
    title: '提示',
    content: '确认删除该属性？',
  })
  let type = '删除'
  if (flag) {
    let result: any = await reqDeletSPU(id)
    if (result.code == 200) {
      ElMessage({
        type: 'success',
        message: `${type}成功`,
      })
      GET_LIST()
    } else {
      ElMessage({
        type: 'error',
        message: `${type}失败`,
      })
    }
  } else {
    ElMessage({
      type: 'info',
      message: `取消${type}`,
    })
  }
}
const CHANGE_ATTR_CALLBACK = () => {
  SWITCH_CARD('DEFAULT_LIST')
  GET_LIST()
}

const OPEN_DIALOG = async (id = 0) => {
  //   console.log(id)
  await GET_SKU_LIST(id)
}

const GET_SKU_LIST = async (id) => {
  let result: SpuListResponseData = await resIdBySkuList(id)
  if (result.code == 200) {
    sku_tableData.value = result.data
    dialogVisible.value = true
  }
}
</script>

<style scoped lang="scss"></style>
